<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header class="banner">
        <ul class="menu-nav">
            <li class="submenu">
                <a href="https://www.haier.com/cn/" class="menu-ietm">haier业务</a>
                <ul class="pop-menu">
                    <li>菜单1</li>
                    <li>菜单2</li>
                    <li>菜单3</li>
                    <li>菜单4</li>
                    <li>菜单5</li>
                </ul>
            </li>
            <li class="submenu">
            </li>
        </ul>
    </header>
    <video src="./下载~1.mp4" controls></video>
    <style>
        ul{
            list-style: none;
            padding: 0%;
        }
        a{
            text-decoration: none;
            color: inherit;
        }
        header{
            position: relative;
            background-color: #cf8787;


        }
        .menu-nav>.submenu{
            display: inline-block;
            margin-right: 1em;
            height: 3.7em;
        }
        .pop-menu{
            display: none;
            position: absolute;
            background-color: #cfacac;
            z-index: 100;
            width: 100%;
            left: 0;
        }
        .menu-nav>.submenu:hover .pop-menu{
            display: block; 
        }
        .submenu>.menu-item{
            display: block;
            padding: 10px;
        }
        .menu-nav>.submenu:hover .menu-item{
            border-bottom: 2px solid rgb(62, 45, 45)
        }
    </style>
</body>
</html>